<style lang="less">
	page {
		background-color: #F7F7F7;
		padding-bottom: 30upx;
	}
	.container{
		padding-top: 30upx;
	}
	.top{
		background-color: #FFFFFF;
		padding: 36upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		margin-bottom: 20upx;
		.top_fl{
			font-size: 26upx;
			font-weight: 500;
			color: #333333;
			line-height: 26upx;
		}
		.top_fr{
			font-size: 36upx;
			font-family: "DINCond";
			font-weight: 400;
			color: #333333;
			line-height: 38upx;
		}
	}
	.main{
		background-color: #FFFFFF;
		.title{
			padding: 30upx 0;
			display: flex;
			align-items: center;
			border-bottom: 1upx solid #EDEDED;
		}
	}
	.title_txt{
		font-size: 28upx;
		font-weight: bold;
		color: #333333;
		line-height: 34upx;
	}
	.ranking{
		width: 20%;
		text-align: center;
	}
	.brandName{
		width: 30%;
		text-align: center;
	}
	.title_name{
		font-size: 28upx;
		font-weight: 500;
		color: #333333;
		line-height: 34upx;
	}
	.title_price{
		font-size: 32upx;
		font-family: "DINCond";
		font-weight: 400;
		color: #333333;
		line-height: 36upx;
	}
	.one{
		background: url("https://xpandago.oss-cn-shanghai.aliyuncs.com/applet/first_icon.png") no-repeat center center / 54upx 54upx;
	}
	.two{
		background: url("https://xpandago.oss-cn-shanghai.aliyuncs.com/applet/second_icon.png") no-repeat center center / 54upx 54upx;
	}
	.three{
		background: url("https://xpandago.oss-cn-shanghai.aliyuncs.com/applet/third_icon.png") no-repeat center center / 54upx 54upx;
	}
</style>


<template>

	<view class="container">
		<view class="top">
			<view class="top_fl">店铺累计销售金额：</view>
			<view class="top_fr">¥ {{obj.orderAmount}}</view>
		</view>
		<view class="main">
			<view class="title">
				<view class="title_txt ranking">排名</view>
				<view class="title_txt brandName">品牌名</view>
				<view class="title_txt ranking">销售数量</view>
				<view class="title_txt brandName">总销售额</view>
			</view>
			<view class="content">
				<view class="title" v-for="(v,i) in obj.brandList" :key="i">
					<view :class="['ranking','title_price','price',i == 0 ? 'one':'',i == 1 ? 'two':'',i == 2 ? 'three':'']">{{v.rank}}</view>
					<view class="title_name brandName">{{v.brandName}}</view>
					<view class="title_name ranking">{{v.goodsNum}}</view>
					<view class="title_price brandName">¥ {{v.orderAmount}}</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import api from '@/common/api';
	export default {

		components: {},

		data() {

			return {
				obj: {},
				token: '',
				userId:''
			}
		},
		onLoad(options) {
			if(Boolean(options.shopUserId) != false){
				this.userId = options.shopUserId
			}
			this.token = uni.getStorageSync('token')
			this.newDataBrand()
		},
		methods: {
			async newDataBrand() {
				const [err, res] = await api.newDataBrand({
					query:{
						shopUserId:this.userId
					},
					header: {
						'Content-Type': 'application/json',
						'token': this.token
					}
				});
				if (res.data.code == 0) {
					let result = res.data.data
					// result.brandList.forEach((v,i) => {
					// 	v.orderAmount = parseFloat(v.orderAmount).toFixed(2)
					// })
					this.obj = result
				}else{
					uni.showToast({
					 	title: res.data.msg,
					 	icon: 'none'
					 })
				}
			}
		},
		
		
		// onReachBottom() {
		// 	this.showLoadMore = true;
		// 	if (this.page >= this.totalPage) {
		// 		this.loadMoreText = "没有更多数据了!"
		// 		return;
		// 	}else{
		// 		setTimeout(() => {
		// 			this.page++
		// 			this.loadMoreText = "加载中..."
		// 			// this.teamOwn(this.page);
		// 		}, 300);
		// 	}
		// },
	}
</script>
